<template>
  <div id="overview">
    <div class="overviewTitle">
      <h1>概览</h1>
    </div>
    <div class="overviewContent">
      <div class="overviewContentLeft">
        <div class="overviewContentLeftTop">
          <!-- <div class="updateBtn" @click="innerVisible = true">
            <i class="el-icon-edit" style="font-size: 20px"></i>
          </div> -->
          <el-descriptions
            class="overviewContentLeftTop-descriptions"
            title="基本信息"
            :column="2"
            direction="vertical"
          >
            <el-descriptions-item label="项目简称">{{
              basicinformation.projectShortName
            }}</el-descriptions-item>
            <el-descriptions-item label="总里程/米">{{
              basicinformation.totalDistance
            }}</el-descriptions-item>
            <el-descriptions-item label="审批状态">
              <el-tag type="success" size="small">{{
                basicinformation.approveStatusName
              }}</el-tag></el-descriptions-item
            >
            <el-descriptions-item label="作业范围">
              DK{{ basicinformation.mileageStartKm }}+
              {{ basicinformation.mileageStartM }}~~ DK{{
                basicinformation.mileageEndKm
              }}+ {{ basicinformation.mileageEndM }}</el-descriptions-item
            >
            <el-descriptions-item label="负责人">
              <div class="descriptionsP">
                <span class="redY"></span>
                <span style="margin-left: 1.5rem">
                  {{ basicinformation.fzrs }}</span
                >
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="抄送人">
              <div class="descriptionsP">
                <span class="redY"></span>
                <span style="margin-left: 1.5rem">
                  {{ basicinformation.csrs }}</span
                >
              </div></el-descriptions-item
            >
            <el-descriptions-item label="计划周期"
              >{{ basicinformation.planCycleStart }}~{{
                basicinformation.planCycleEnd
              }}</el-descriptions-item
            >
            <el-descriptions-item label="工作进度"
              ><span style="color: #409eff"
                >{{ basicinformation.workScheduling }}%</span
              ></el-descriptions-item
            >
          </el-descriptions>
        </div>
        <div class="overviewContentLeftbottom">
          <h3 style="margin-left: 1rem" class="overviewContentTitle">
            审批信息
          </h3>
          <div class="steps">
            <div class="stepsItem" v-for="(item, index) in steps" :key="index">
              <div class="userImg">
                <img v-if="index == 0" src="./img/img.jpg" alt="" />
                <img v-else-if="index != 0" src="./img/img2.jpg" alt="" />
              </div>
              <div style="width: 100%; color: #a99c9c" class="">
                <div class="xmtime">
                  <div>
                    {{ item.categoryName
                    }}<span style="color: #409eff; margin-left: 10px">
                      {{ item.name }}</span
                    >
                  </div>
                  <div>
                    {{ item.startTime }}
                  </div>
                </div>
                <div class="nr">
                  {{ item.comment }}
                </div>
              </div>
              <div class="progress" v-if="index < steps.length - 1"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="overviewContentRight">
        <div class="overviewContentRightDiv">
          <div class="updateBtn" @click="updetebasicin(1)">
            <i class="el-icon-edit" style="font-size: 20px"></i>
          </div>
          <h3 class="overviewContentTitle">人员分配</h3>
          <div class="overviewPs">
            <p
              class="overviewP"
              v-for="(item, index) in basicinformation.engineeringJobAssigns"
              :key="index"
            >
              {{ item.name }}:{{ item.number }}{{ item.unit }}
            </p>
          </div>
        </div>
        <div class="overviewContentRightDiv">
          <div class="updateBtn" @click="updetebasicin(2)">
            <i class="el-icon-edit" style="font-size: 20px"></i>
          </div>
          <h3 class="overviewContentTitle">物资分配</h3>

          <div class="overviewPs">
            <p
              class="overviewP"
              v-for="(item, index) in basicinformation.materialAssigns"
              :key="index"
            >
              {{ item.name }}:{{ item.number }}{{ item.unit }}
            </p>
          </div>
        </div>
        <div class="overviewContentRightDiv">
          <div class="updateBtn" @click="updetebasicin(3)">
            <i class="el-icon-edit" style="font-size: 20px"></i>
          </div>
          <h3 class="overviewContentTitle">机械分配</h3>
          <div class="overviewPs">
            <p
              class="overviewP"
              v-for="(
                item, index
              ) in basicinformation.equipmentEquipmentAssigns"
              :key="index"
            >
              {{ item.name }}:{{ item.number }}{{ item.unit }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      width="30%"
      title="编辑"
      :visible.sync="innerVisible"
      append-to-body
      :destroy-on-close="false"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="项目简称" prop="projectShortName">
          <el-input v-model="ruleForm.projectShortName"></el-input>
        </el-form-item>
        <el-form-item label="总里程/米" prop="totalDistance">
          <el-input v-model="ruleForm.totalDistance"></el-input>
        </el-form-item>
        <el-form-item label="作业范围">
          <el-col :span="10">
            <el-col :span="4">
              <span style="width: 50px; display: block"> DK：</span></el-col
            >
            <el-col :span="8">
              <el-input v-model="ruleForm.mileageStartKm"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center"> + </el-col>

            <el-col :span="8">
              <el-input v-model="ruleForm.mileageStartM"></el-input>
            </el-col>
          </el-col>
          <el-col :span="14">
            <el-form-item label="到" label-width="20px">
              <el-col :span="3">
                <span style="width: 50px; display: block"> DK：</span></el-col
              >
              <el-col :span="8">
                <el-input v-model="ruleForm.mileageEndKm"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center"> + </el-col>

              <el-col :span="8">
                <el-input v-model="ruleForm.mileageEndM"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="批准作业时间" prop="jhzq">
          <el-date-picker
            v-model="ruleForm.jhzq"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="负责人" prop="responsibleUserIds">
          <el-select
            v-model="ruleForm.responsibleUserIds"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="抄送人" prop="carbonCopyUserIds">
          <el-select
            v-model="ruleForm.carbonCopyUserIds"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确认</el-button
          >
          <el-button @click="resetForm('ruleForm')">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      width="40%"
      title="编辑"
      :visible.sync="innerVisible4"
      append-to-body
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal="false"
    >
      <el-form
        :model="basicinformation1"
        ref="ruleForm"
        label-width="100px"
        class="basicinformation1-ruleForm"
      >
        <el-button class="basicinformation1-btn" @click="addItem()"
          >添加</el-button
        >
        <el-form-item
          style="width: 80%"
          v-if="innerVisible1"
          label="人员分配"
          prop="fzr"
        >
          <div
            v-for="(item, index) in basicinformation1.engineeringJobAssigns"
            :key="index"
            style="display: flex"
          >
            <el-input
              placeholder="请输入内容"
              v-model="basicinformation1.engineeringJobAssigns[index].number"
              class="input-with-select"
            >
              <el-select
                style="width: 7rem"
                slot="prepend"
                v-model="
                  basicinformation1.engineeringJobAssigns[index]
                    .engineeringJobId
                "
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-button slot="append" style="width: 60px" disabled>{{
                uninMeasurement(
                  1,
                  basicinformation1.engineeringJobAssigns[index]
                    .engineeringJobId
                )
              }}</el-button>
            </el-input>
            <el-button
              type="danger"
              icon="el-icon-delete"
              style="
                width: 40px;
                height: 40px;
                margin-top: 8px;
                margin-left: 1rem;
              "
              circle
              @click="deleteSelect(index)"
            ></el-button>
          </div>
        </el-form-item>

        <el-form-item
          style="width: 80%"
          v-if="innerVisible2"
          label="物资分配"
          prop="fzr"
        >
          <div
            v-for="(item, index) in basicinformation1.materialAssigns"
            :key="index"
            style="display: flex"
          >
            <el-input
              placeholder="请输入内容"
              v-model="basicinformation1.materialAssigns[index].number"
              class="input-with-select"
            >
              <el-select
                style="width: 7rem"
                slot="prepend"
                v-model="basicinformation1.materialAssigns[index].materialId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-button slot="append" style="width: 60px" disabled>{{
                uninMeasurement(
                  2,
                  basicinformation1.materialAssigns[index].materialId
                )
              }}</el-button>
            </el-input>
            <el-button
              type="danger"
              icon="el-icon-delete"
              style="
                width: 40px;
                height: 40px;
                margin-top: 8px;
                margin-left: 1rem;
              "
              circle
              @click="deleteSelect(index)"
            ></el-button>
          </div>
        </el-form-item>
        <el-form-item
          style="width: 80%"
          v-if="innerVisible3"
          label="机械分配"
          prop="fzr"
        >
          <div
            v-for="(item, index) in basicinformation1.equipmentEquipmentAssigns"
            :key="index"
            style="display: flex"
          >
            <el-input
              placeholder="请输入内容"
              v-model="
                basicinformation1.equipmentEquipmentAssigns[index].number
              "
              class="input-with-select"
            >
              <el-select
                style="width: 7rem"
                slot="prepend"
                v-model="
                  basicinformation1.equipmentEquipmentAssigns[index]
                    .mechanicalEquipmentId
                "
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-button slot="append" style="width: 60px" disabled>{{
                uninMeasurement(
                  3,
                  basicinformation1.equipmentEquipmentAssigns[index]
                    .mechanicalEquipmentId
                )
              }}</el-button>
            </el-input>
            <el-button
              type="danger"
              icon="el-icon-delete"
              style="
                width: 40px;
                height: 40px;
                margin-top: 8px;
                margin-left: 1rem;
              "
              circle
              @click="deleteSelect(index)"
            ></el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm1('ruleForm')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getManagementdetails,
  getProcessInstance,
  updateMaterial,
  updateJob,
  updateEquipment,
  updateManagement,
} from "/src/http/inTellingSchedule/project.js";
import { getMl, getJob, getEquipment } from "/src/http/ml/ml.js";
import { getEnableUser } from "/src/http/inTellingSchedule/scheduleCommand.js";
export default {
  data() {
    return {
      innerVisible: false,
      innerVisible1: false,
      innerVisible2: false,
      innerVisible3: false,
      innerVisible4: false,
      basicinformation: {},
      processInstanceId: "",
      basicinformation1: {
        engineeringJobAssigns: [],
        materialAssigns: [],
        equipmentEquipmentAssigns: [],
      },
      updetebasicinId: "",
      basicinformationnum: {},
      options1: [],
      options2: [],
      options3: [],
      userList: [],
      steps: [],
      ruleForm: {
        projectShortName: "",
        qtzy: "",
        totalDistance: "",
        mileageStartKm: "",
        mileageStartM: "",
        mileageEndKm: "",
        mileageEndM: "",
        responsibleUserIds: [],
        carbonCopyUserIds: [],
      },
      selectOption: [],
      inTellingId: "",
    };
  },
  components: {},
  mounted() {
    this.initialize();
  },
  created() {
    this.inTellingId = JSON.parse(localStorage.getItem("inTellingId"));
  },
  methods: {
    initialize() {
      this.getml();
      this.getdetails();
    },
    getml() {
      getJob().then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.options1 = res.data;
        }
      });
      // getMl().then((res) => {
      //   if (res.code == 200) {
      //     console.log(res);
      //     this.options2 = res.data;
      //   }
      // });

      getEquipment().then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.options3 = res.data;
        }
      });
      getEnableUser().then((res) => {
        this.userList = res.data;
      });
    },
    //计量单位
    uninMeasurement(type, unin) {
      let name;
      switch (type) {
        case 1:
          this.options1.forEach((item) => {
            if (item.id == unin) {
              name = item.unit;
            }
          });
          break;
        case 2:
          this.options2.forEach((item) => {
            if (item.id == unin) {
              name = item.unit;
            }
          });
          break;
        case 3:
          this.options3.forEach((item) => {
            if (item.id == unin) {
              name = item.unit;
            }
          });
          break;
        default:
          name = "单位";
      }
      return name;
    },
    getdetails() {
      getManagementdetails(this.inTellingId).then((res) => {
        this.basicinformation = res.data;
        this.basicinformation.fzrs = "";
        this.basicinformation.csrs = "";
        this.processInstanceId = res.data.processInstanceId;
        console.log(res.data);
        let responsibleUsers = [];
        let carbonCopyUsers = [];
        res.data.responsibleUsers.forEach((item) => {
          this.basicinformation.fzrs =
            this.basicinformation.fzrs + item.name + ",";
          responsibleUsers.push(item.id);
        });
        res.data.carbonCopyUsers.forEach((item) => {
          this.basicinformation.csrs =
            this.basicinformation.fzrs + item.name + ",";
          carbonCopyUsers.push(item.id);
        });
        this.ruleForm = {
          projectShortName: res.data.projectShortName,
          totalDistance: res.data.totalDistance,
          mileageStartKm: res.data.mileageStartKm,
          mileageStartM: res.data.mileageStartM,
          mileageEndKm: res.data.mileageEndKm,
          mileageEndM: res.data.mileageEndM,
          jhzq: [res.data.planCycleStart, res.data.planCycleEnd],
          responsibleUserIds: responsibleUsers,
          carbonCopyUserIds: carbonCopyUsers,
        };
        getProcessInstance({ processInstanceId: this.processInstanceId }).then(
          (res) => {
            console.log(res.data, 2222);
            this.steps = res.data;
          }
        );
      });
    },

    handleChange() {
      //选择器选项改变时
      this.selectOption = [
        this.value1,
        this.value2,
        this.value3,
        this.value4,
        this.value5,
      ];
    },
    computeDifferenceSet(currentSelectValue) {
      if (this.innerVisible1) {
        let remainingOption = this.options1.filter((item) => {
          return (
            this.selectOption.indexOf(item.value) == -1 ||
            currentSelectValue === item.value
          );
        });
        return remainingOption;
      } else if (this.innerVisible2) {
        let remainingOption = this.options2.filter((item) => {
          return (
            this.selectOption.indexOf(item.value) == -1 ||
            currentSelectValue === item.value
          );
        });
        return remainingOption;
      } else if (this.innerVisible3) {
        let remainingOption = this.options3.filter((item) => {
          return (
            this.selectOption.indexOf(item.value) == -1 ||
            currentSelectValue === item.value
          );
        });
        return remainingOption;
      }
    },
    addItem() {
      if (this.innerVisible1) {
        this.basicinformation1.engineeringJobAssigns.push({
          engineeringJobId: "",
          number: "",
        });
      } else if (this.innerVisible2) {
        this.basicinformation1.materialAssigns.push({
          materialId: "",
          number: "",
        });
      } else if (this.innerVisible3) {
        this.basicinformation1.equipmentEquipmentAssigns.push({
          mechanicalEquipmentId: "",
          number: "",
        });
      }
    },
    closedialog() {
      this.innerVisible1 = false;
      this.innerVisible2 = false;
      this.innerVisible3 = false;
    },
    updetebasicin(type) {
      console.log(type);
      switch (type) {
        case 1:
          this.innerVisible1 = true;
          this.innerVisible2 = false;
          this.innerVisible3 = false;
          this.innerVisible4 = true;
          this.basicinformation1.engineeringJobAssigns = JSON.parse(
            JSON.stringify(this.basicinformation.engineeringJobAssigns)
          );

          break;
        case 2:
          this.innerVisible1 = false;
          this.innerVisible2 = true;
          this.innerVisible3 = false;
          this.innerVisible4 = true;
          this.basicinformation1.materialAssigns = JSON.parse(
            JSON.stringify(this.basicinformation.materialAssigns)
          );
          console.log(this.basicinformation.materialAssigns);
          break;
        case 3:
          this.innerVisible1 = false;
          this.innerVisible2 = false;
          this.innerVisible3 = true;
          this.innerVisible4 = true;
          this.basicinformation1.equipmentEquipmentAssigns = JSON.parse(
            JSON.stringify(this.basicinformation.equipmentEquipmentAssigns)
          );
          console.log(this.basicinformation.equipmentEquipmentAssigns);
          break;
        default:
          return;
      }
    },
    deleteSelect(index) {
      this.$confirm("确认删除该选项吗?", "提示", {
        confirmButtonText: "是的",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.innerVisible1) {
            this.basicinformation1.engineeringJobAssigns.splice(index, 1);
          } else if (this.innerVisible2) {
            this.basicinformation1.materialAssigns.splice(index, 1);
          } else if (this.innerVisible3) {
            this.basicinformation1.equipmentEquipmentAssigns.splice(index, 1);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async submitForm(formName) {
      console.log(formName);
      this.ruleForm.id = this.inTellingId;
      await this.$confirm("确认编辑基本信息吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          try {
            updateManagement(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "编辑完成",
                  type: "success",
                });
              } else {
                this.$message.error(res.message);
              }
            });
          } catch (error) {
            console.log("接口调用出错::: ", error);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    async submitForm1(formName) {
      console.log(formName);
      await this.$confirm("确认编辑分配吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          if (this.innerVisible1) {
            let arr = [];
            this.basicinformation1.engineeringJobAssigns.forEach((item) => {
              arr.push({
                objectId: this.inTellingId,
                engineeringJobId: item.engineeringJobId,
                number: item.number,
              });
            });
            updateJob(arr).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "编辑成功!",
                });
                console.log(res);
                this.getdetails();
              }
            });
          } else if (this.innerVisible2) {
            let arr = [];
            this.basicinformation1.materialAssigns.forEach((item) => {
              arr.push({
                objectId: this.inTellingId,
                materialId: item.materialId,
                number: item.number,
              });
            });
            console.log(arr);
            updateMaterial(arr).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "编辑成功!",
                });
                this.getdetails();
              }
            });
          } else if (this.innerVisible3) {
            let arr = [];
            this.basicinformation1.equipmentEquipmentAssigns.forEach((item) => {
              arr.push({
                objectId: this.inTellingId,
                mechanicalEquipmentId: item.mechanicalEquipmentId,
                number: item.number,
              });
            });
            console.log(arr, 77777777);
            updateEquipment(arr).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "编辑成功!",
                });

                this.getdetails();
              }
            });
          }

          this.innerVisible1 = false;
          this.innerVisible2 = false;
          this.innerVisible3 = false;
          this.innerVisible4 = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    resetForm() {
      this.ruleForm = {
        projectShortName: "",
        qtzy: "",
        totalDistance: "",
        mileageStartKm: "",
        mileageStartM: "",
        mileageEndKm: "",
        mileageEndM: "",
        responsibleUserIds: [],
        carbonCopyUserIds: [],
      };
      this.innerVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
#overview {
  width: 100%;
  // background-color: #eeeeee;
  // padding-top: 0.1rem;
  .overviewContentTitle {
    color: #409eff;
    margin-bottom: 1rem;
  }
  .overviewTitle {
    width: 99%;
    background-color: white;
    padding: 2rem 1rem;
    margin: 7px;
  }
  .updateBtn {
    position: absolute;
    right: 2rem;
    top: 6px;
  }
  .overviewContent {
    display: flex;
    height: 100%;

    .overviewContentLeft {
      background-color: white;
      width: 28%;
      height: 100%;
      margin: 8px;

      .overviewContentLeftTop {
        height: 22rem;
        position: relative;
        .overviewContentLeftTop-descriptions {
          padding: 1rem;

          .descriptionsP {
            position: relative;
            .redY {
              width: 1rem;
              height: 1rem;
              background-color: #fa8888;
              border-radius: 0.5rem;
              display: inline-block;
              margin-right: 0.5rem;
              position: absolute;
              top: 1px;
            }
          }
        }
      }
      .overviewContentLeftbottom {
        height: 17rem;
        .overviewContentLeftbottomTitle {
        }
        .steps {
          .stepsItem {
            display: flex;
            position: relative;
            padding: 1rem 2rem;
            //进度条
            .progress {
              position: absolute;
              height: 3rem;
              width: 2px;
              background-color: #eeeeee;
              bottom: -1rem;
              left: 3rem;
            }
            .xmtime {
              display: flex;
              justify-content: space-between;
              width: 100%;
            }
            .nr {
              margin-top: 2px;
            }
          }
          .userImg {
            margin-right: 2rem;
            img {
              width: 2rem;
              height: 2rem;
            }
          }
        }
      }
    }
    .overviewContentRight {
      width: 78%;
      height: 39rem;
      margin: 8px;
      .overviewContentRightDiv {
        background-color: white;
        padding: 1rem;
        margin-bottom: 1rem;
        height: 32%;
        position: relative;
        overflow: hidden;
        .overviewPs {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          height: 100%;
          padding: 0 2rem;
          .overviewP {
            display: inline-block;
            margin-right: 2rem;
            font-size: 1.17em;
            font-weight: 500;
            line-height: 30px;
            width: 15rem;
          }
        }
      }
    }
  }
}
.basicinformation1-ruleForm {
  position: relative;
  .input-with-select {
    margin-top: 0.5rem;
  }

  .basicinformation1-btn {
    position: absolute;
    right: 1rem;
  }
}
</style>
<style lang="less"></style>
